<template>
  <div class="app-container">
    <!-- 上部分表单 -->
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="80px" label-position="top"
      style="width: 200px; margin: 0 auto">
      <el-row>
        <el-col :span="24">
          <div style="
              font-size: 18px;
              font-weight: bolder;
              margin-top: 20px;
              text-align: center;
            ">
            选择油企
            <hr />
          </div>
        </el-col>

        <el-form-item label="" prop="enterpriseId">
          <el-select v-model="groupForm.enterpriseId" placeholder="请选择油企id" clearable size="small"
            @change="enterpriseSelect">
            <el-option label="请选择" value="" />
            <el-option :label="ele.enterpriseName" :value="ele.enterpriseId" v-for="ele in currentEnterprise"
              :key="ele.enterpriseId" />
          </el-select>
        </el-form-item>
      </el-row>
      <el-row v-if="!mediaId">
        <el-col :span="24">
          <div style="
              font-size: 18px;
              font-weight: bolder;
              margin-top: 20px;
              text-align: center;
            ">
            图片素材
            <hr />
          </div>
        </el-col>
        <el-upload class="avatar-uploader" :action="imgUpConfig.addressUrl" :headers="imgUpConfig.headers"
          :show-file-list="false" accept="image/gif,image/jpeg,image/png,image/jpg,image/bmp"
          :before-upload="beforeAvatarUpload" :on-success="handleAvatarSuccess">
          <img v-if="groupForm.licenseImg" :src="groupForm.licenseImg" class="avatar" />

          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          <div class="el-upload__tip" slot="tip">
            只能上传图片文件，图片不超过1M
          </div>
        </el-upload>
      </el-row>
    </el-form>
    <hr v-if="!!mediaId" />
    <div style="
        font-size: 18px;
        font-weight: bolder;
        margin-top: 20px;
        text-align: center;
      " v-if="!!mediaId">
      👇已上传成功，请复制👇
    </div>
    <div style="
        margin: 0 auto;
        width: 600px;
        text-align: center;
        margin-top: 40px;
        font-size: 15px;
        font-weight: bolder;
      " v-clipboard:copy="mediaId" v-clipboard:error="onCopyError" v-clipboard:success="onCopySuccess"
      v-if="!!mediaId">
      {{ mediaId }}
    </div>
    <div class="el-upload__tip" slot="tip" style="margin: 0 auto; width: 600px; text-align: center; margin-top: 20px"
      v-clipboard:copy="mediaId" v-clipboard:error="onCopyError" v-clipboard:success="onCopySuccess" v-if="!!mediaId">
      点击即可复制素材Id到剪切板，在【广告推广】中使用
    </div>
    <div style="text-align:center;margin-top:20px" v-if="mediaId">

      <button type="button" class="
          btn btn-sm btn-outline-secondary
          dropdown-toggle-split
        " @click="clearMediaId">
        再上传一张
      </button>
      <button type="button" class="
          btn btn-sm 
          btn-primary
        " style="margin-left:20px" v-clipboard:copy="mediaId" v-clipboard:error="onCopyError"
        v-clipboard:success="onCopySuccess">
        复制
      </button>

    </div>
  </div>
</template>
<script>
import Vue from "vue";
import {
  printOrderInfo,
  listEnterpriseData,
  listEnterpriseDataExport,
} from "@/api/station/order";
import { getEnterpriseList } from "@/api/dept";
import { getToken } from "@/utils/auth";
import VueClipboard from "vue-clipboard2";
Vue.use(VueClipboard);

export default {
  name: "Order_Oil",
  data() {
    return {
      //创建订单时间间隔
      dateRangeCreatedDate: [],
      // 总条数
      total: 0,
      // 订单支付表格数据
      orderList: [],
      oilNameOptions: [],
      // 字典
      payTypeOptions: [],
      // 下拉油站
      stationOptions: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        levelId: this.levelId,
        pageNum: 1,
        pageSize: 10,
        oilGun: null,
        oilName: null,
        stationId: null,
        orderType: null,
        //orderType:1,
        oilPersonnel: null,
        createdDate: null,
        likeConsumer: null,
        orderNo: null,
        customerPhone: null,
      },
      // 表单校验
      rules: {},
      reprint: false,
      oilList: [],
      imgUpConfig: {
        headers: {
          Authorization: "Bearer " + getToken(),
        },
        addressUrl: "",
        limit: 2,
      },
      groupForm: {},
      currentEnterprise: [],
      mediaId: "",
    };
  },
  created() {
    this.getEnterpriseList();
  },
  components: {
    VueClipboard: VueClipboard,
  },
  methods: {
    clearMediaId() {
      this.mediaId = "";
    },
    enterpriseSelect(a) {
      this.imgUpConfig.addressUrl =
        process.env.VUE_APP_BASE_API +
        "wxUpload" +
        "?enterpriseId=" +
        this.groupForm.enterpriseId;
    },
    onCopySuccess() {
      this.msgSuccess("网址已经拷贝到剪切板");
    },
    onCopyError() {
      this.msgError("网址拷贝失败，请手动复制");
    },
    getEnterpriseList() {
      getEnterpriseList({
        pageSize: 10000,
        pageNum: 1,
      }).then((res) => {
        this.currentEnterprise = res.rows;
      });
    },
    beforeAvatarUpload(file) {
      if (!this.groupForm.enterpriseId) {
        this.$message.error("请先选择油企!");
        return false;
      }
      const isLt1M = file.size / 1024 / 1024 < 1;
      if (!isLt1M) {
        this.$message.error("上传头像图片大小不能超过 1MB!");
        return false;
      }
      return isLt1M;
    },
    handleAvatarSuccess(response, file, fileList) {
      if (response.code != 200) {
        this.$message.error(response.msg);
      } else {
        this.mediaId = response.data;
        this.$message.success(response.msg)
      }
    },
    /** 查询订单支付列表 */
    getList() {
      this.queryParams.levelId = this.levelId;
      listEnterpriseData(
        this.addDateRange(this.queryParams, this.dateRangeCreatedDate)
      ).then((response) => {
        this.orderList = response.rows;
        this.total = response.total;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRangeCreatedDate = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    //打印订单小票
    printOrderInfo(row) {
      printOrderInfo({ orderId: row.orderId }).then((response) => {
        this.msgSuccess("小票打印成功");
      });
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm("是否确认导出所有订单支付数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return listEnterpriseDataExport(queryParams);
        })
        .then((response) => {
          this.download(response.msg);
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.avatar-uploader {
  .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .el-upload:hover {
    border-color: #409eff;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
}

.app-container {
  margin-top: -15px;
}

.button-from {
  width: 100%;
  display: flex;
  flex-wrap: wrap;

  .button-style1 {
    display: inline-block;
    width: 80px;

    .el-button {
      margin: 0 0 0 15px;
    }
  }
}

::v-deep .card-table {
  padding: 10px;
  margin-top: 20px;
  background-color: #f8f8f8;

  .el-button {
    margin: 0 5px 0 0;
  }
}

// 表格样式
::v-deep .el-form-item {
  margin-bottom: 0;

  .el-form-item__label {
    padding: 0;
    margin: 0;
    height: 29px;
    font-weight: 400;
    font-size: 12px;
  }

  .el-button--cyan {
    margin-left: 20px;
  }
}

::v-deep .el-table {
  border: 1px #f8f8f8 solid;
  border-bottom: 1px #dfe6ec solid;
}

::v-deep .is-center {
  border: 1px transparent solid;
  border-bottom: 1px #f8f8f8 solid;
}
</style>